<template>
	<view :class="['vh100',{'dark':theme == 'dark'}]">
		<view class="pt20 plr20">
			<!-- <view class="flex alcenter mt10">
				<image src="../../static/image/tssp.png" class="wt15 h15"></image>
				<view class="chengse ft14"> {{$t('bico.W243')}}</view>
			</view> -->
			<view class="mb10 " v-if="getPhone==''">
				<view class="flex bgwhite alcenter bdb_myblue ">
					<view class="ft12" @click="showP=true" >{{array[index].country}} +{{array[index].code}}</view>
					<u-picker mode="selector" v-model="showP"  :default-selector="[0]"
					:confirm-text="confirmText" :cancel-text="cancelText"
					  @confirm="bindPickerChange" :range="array" range-key="label">
						
					</u-picker>
					<span> 丨 </span>
					<input type="text" v-model="phone" class="h40 lh40 flex1 input-uni" :placeholder="$t('login.p_mobile')">
					<image src="/static/image/password.png" class="wt15 h15 ml10"></image>
				</view>
				
			</view>
			<view class="mb10 " v-if="getEmail==''">
				<view class="flex bgwhite alcenter bdb_myblue ">
					<input type="text"  v-model="email" class="h40 lh40 flex1 input-uni" :placeholder="$t('login.p_email')">
					<image src="/static/image/password.png" class="wt15 h15 ml10"></image>
				</view>
				<!-- <view class="ft10 pt5 chengse" v-if="2">{{$t('login').p_len}}</view> -->
			</view>

			<view class="flex bgwhite alcenter bdb_myblue " v-if="!smsSendBoolean">
				<input type="text" v-model="code2"  class="h40 lh40 flex1 input-uni" :placeholder="$t('login.p_mobilecode')">
				<view><button size="mini" type="primary" :disabled="disable2" :loading="load2" @click="send">{{codeText2}}</button></view>
			</view>
			<view class="flex bgwhite alcenter bdb_myblue " v-if="!emailSendBoolean">
				<input type="text" v-model="code"  class="h40 lh40 flex1 input-uni" :placeholder="$t('login.p_emailcode')">
				<view><button size="mini" type="primary" :disabled="disable" :loading="load" @click="sendEmail">{{codeText}}</button></view>
			</view>
			
			
			
			
			<view class="mt45 bgBlue radius4 ptb10 white ft19 tc mb10" @tap="confrim">{{$t('login').e_confrim}}</view>
		</view>
	</view>
	
</template>

<script>
	import {mapState,mapActions,mapGetters} from 'vuex';
	import {getMsg,info,commonPhoneCode,checkSmsCode,bindAccount,commonCheckSmsSend,commonCheckEmailSend} from '../../common/apiString.js'
	import country from '@/common/country.js'
	import {myMixins} from '@/common/myMixins.js'
	export default{
		mixins:[myMixins],
		data(){
			return {
				confirmText:this.$t('login').c1,
				cancelText:this.$t('login').c2,
				getEmail:'',
				getPhone:'',
				
				showP:false,
				index:0,
				array: country,
				phoneItem:[],//区号对象 code area
				phone:'',
				email:'',
			
				lang:'',
				
				
				code:'',
				disable:false,
				load:false,
				codeText:this.$t('login').r_send,
				
				code2:'',
				disable2:false,
				load2:false,
				codeText2:this.$t('login').r_send,
				smsSendBoolean:true,
				emailSendBoolean:true,
				
			}
		},
		computed:{
			...mapState({
			  theme:state=>state.theme
			}),
		},
		onLoad(e) {
			this.getUserInfo() 
			this.getPhoneCode()
			this.lang=uni.getStorageSync('lang');
			
			this.$utils.setTheme(this.theme);
			this.getSmsSend();
			this.getEmailSend()
			
		},
		methods:{
			getSmsSend(){
			   this.$utils.initData({url:commonCheckSmsSend,type:'post'},(res,msg)=>{
			   	this.smsSendBoolean = res == "N"
			   })
					
			 },
			 getEmailSend(){
				 this.$utils.initData({url:commonCheckEmailSend,type:'post'},(res,msg)=>{
				 	this.emailSendBoolean = res == "N"
				 })
			 },
			//选择区号
			bindPickerChange(e){
				this.index=e[0];
				this.phoneItem=this.array[this.index];
			},
			//获取手机前缀
			getPhoneCode(){
			    this.$utils.initData({url:commonPhoneCode,type:'post'},(res,msg)=>{
					this.array=res
					this.index=0
			        this.phoneItem=res[0]
			    })
			},
			//获取用户信息
			getUserInfo(){
				var that = this;
				this.$utils.initDataToken({url:info,data:{},type:'POST'},(res,msg)=>{
					that.getEmail = res.email;
					that.getPhone = res.phone;
				
					if(this.getEmail==''){
						uni.setNavigationBarTitle({
							title:this.$t('bico.W708'),
						})
						
					}else{
						uni.setNavigationBarTitle({
							title:this.$t('bico.W707'),
						})
					}
					this.lang=uni.getStorageSync('lang');
					
					});
				},
			//发送验证码
			send(){
				var url= getMsg;
				var data = {}
				if(this.getPhone==''){
					if(this.phone==''){
						this.$utils.showLayer(this.$t('login.p_mobile'))
						return
					}
					data = {
						account:this.phone,
						code:this.phoneItem.code
					}
				}
				this.$utils.initDataToken({url:url,data:data,type:'POST'},(res,msg)=>{
					   this.disable2 = true;
					   // this.load = true;
					   var times = 120;
					   var timer = setInterval(()=>{
					   	times--;
					   	if(times<10){
					   		times = '0'+times;
					   	}
					   	this.codeText2 = times + 's'
					   	if(times<=0){
					   		clearInterval(timer);
					   		this.disable2 = false;
					   		this.load2 = false;
					   		this.codeText2 = this.$t('login').r_send;
					   	}
					   },1000)
					});
			},
			sendEmail(){
				var url= getMsg;
				var data = {}
				if(this.getEmail==''){
					if(this.email==''){
						this.$utils.showLayer(this.$t('login.p_email'))
						return
					}
					data = {
						account:this.email
					}
				}
				this.$utils.initDataToken({url:url,data:data,type:'post'},(res,msg)=>{
					   this.disable = true;
					   // this.load = true;
					   var times = 300;
					   var timer = setInterval(()=>{
					   	times--;
					   	if(times<10){
					   		times = '0'+times;
					   	}
					   	this.codeText = times + 's'
					   	if(times<=0){
					   		clearInterval(timer);
					   		this.disable = false;
					   		this.load= false;
					   		this.codeText = this.$t('login').r_send;
					   	}
					   },1000)
					});
			},
			confrim(){
				if(!this.smsSendBoolean && this.code2==''){
					this.$utils.showLayer(this.$t('login.p_mobilecode'))
					return
				}
				if(!this.emailSendBoolean &&this.code==''){
					this.$utils.showLayer(this.$t('login.p_emailcode'))
					return
				}
				if(this.getEmail==''){
					//绑定邮箱
					this.bond(this.getPhone,this.email,this.code2,this.code,this.$t("form.emailSmsError"))
				}else{
					//绑定手机
					this.bond(this.getEmail,this.phone,this.code,this.code2,this.$t("form.phoneSmsError"))
				}
			},
			
			bond(account,accountBond,code,code2,msg){
				var data={
					account:account,
					code:code
				}
				
				this.$utils.initDataToken({url:checkSmsCode,data:data,type:'post'},(res,msg)=>{
					if(res.isTrue == 'Y'){
						var bondData={
							bindAccount:accountBond,
							msg:code2
						}
						this.$utils.initDataToken({url:bindAccount,data:bondData,type:'post'},(res,msg)=>{
							this.$utils.showLayer(this.$t('codeTxt.binding'));
							setTimeout(()=>{
								uni.navigateBack({
									delta: 2
								});
							},500)
						});
						
					}else{
						this.$utils.showLayer(msg);
					}
				});
				
			}
			
			
			
		}
	}
</script>

<style lang="scss">
	.chengse {
	    color: #05cfa4;
	    margin: 0 2vw;
	}
	.ft14 {
	    font-size: 12px;
	}
	.vh100 {
	    min-height: 100vh;
	    margin: 0 2vw;
	}
	uni-view {
	    box-sizing: border-box;
	    line-height: 1.8;
	}
	.ft19 {
	    font-size: 4vw;
	}
	
	
	
	
	
	
	
	
	
	
	
	
</style>
